import {CCard} from '@/components/card'
import EditUserCompanyNameModalForm from '@/components/form/editCompanyModalForm'
import EditUserInfoModalForm from '@/components/form/editUserInfoModalForm'
import EditUserPhoneModalForm from '@/components/form/editUserPhone'
import {IconImg} from '@/components/image'
import {CFormModal, ChangeVisible} from '@/components/modal'
import {CnMediumSpan, CnNormalSpan} from '@/components/text'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {toAboutUs, toContactUs} from '@/libs/pageRedirect'
import {PropType} from 'vue'
import './userSettingItem.less'

const SettingItem = defineComponent({
  props: {
    label: String,
    desc: String,
    clickText: String,
    onClick: Function
  },
  setup(props) {
    return () => (
      <div class='h-64 flex justify-center items-center px-32 cursor-pointer'>
        <div class='flex-1 flex items-center'>
          <CnMediumSpan class='text-16 mr-42'>{props.label || 'label'}</CnMediumSpan>
          <CnNormalSpan class='text-16'>{props.desc}</CnNormalSpan>
        </div>
        <CnNormalSpan
          class='text-primary flex items-center'
          onClick={() => props.onClick && props.onClick()}
        >
          {props.clickText || '编辑'}
        </CnNormalSpan>
      </div>
    )
  }
})

export const UserSettingItem = defineComponent({
  props: {
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },
  emits: {
    finished: (): boolean => true
  },
  setup(props, {emit}) {
    const state = reactive<{
      visible: boolean
      isShowUserCode: boolean
    }>({
      visible: false,
      isShowUserCode: false
    })

    /* 修改密码的弹窗Ok事件 */
    const editUserPwModalOk = () => {}
    /* 修改密码的弹窗Cancel事件 */
    const editUserPwModalCancel = () => {}
    return () => (
      <CCard showTitle={false} title='个人资料' class='bg-white p-0'>
        <div class='flex justify-between items-center px-32 border-b border-splitLine py-25'>
          <div class='flex-1 h-56 flex items-center'>
            <IconImg imgName='header' class='w-56 h-56 mr-16'></IconImg>
            <CnMediumSpan class='text-16'>{props.userInfo.userNearName}</CnMediumSpan>
          </div>
          <a-button class='bg-primaryLight rounded-2' onClick={() => (state.visible = true)}>
            {/* <CnNormalSpan class='text-primary flex items-center'>编辑资料</CnNormalSpan> */}
            <CnNormalSpan class='text-primary flex items-center'>修改密码</CnNormalSpan>
          </a-button>
        </div>
        {/* <a-modal
          title='导出所有参数的历史记录'
          v-model={[state.visible, 'visible']}
          onOk={editUserPwModalOk}
          onCancel={editUserPwModalCancel}
        >
          <div class='edit_pw_modal_box'>修改密码</div>
        </a-modal> */}

        <CFormModal class='w-388' v-model={[state.visible, 'visible']}>
          {{
            default: (changeVisible: ChangeVisible) => (
              <EditUserInfoModalForm
                changeVisible={changeVisible}
                userInfo={props.userInfo}
                onFinish={() => {
                  emit('finished')
                }}
              ></EditUserInfoModalForm>
            )
          }}
        </CFormModal>
      </CCard>
    )
  }
})

export const UserInfoItem = defineComponent({
  props: {
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },

  setup(props) {
    return () => (
      <CCard showTitle={false} title={'用户信息'} class='bg-white p-0'>
        <SettingItem
          label='用户编码'
          desc={props.userInfo.userCode || '用户编码为空'}
          clickText='查看全部'
        ></SettingItem>
      </CCard>
    )
  }
})

export const SystemSettingItem = defineComponent({
  props: {
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },
  emits: {
    finished: (): boolean => true
  },
  setup() {
    return () => (
      <CCard showTitle={false} title={'系统信息'} class='bg-white p-0'>
        <SettingItem label='系统消息' clickText='查看全部'></SettingItem>
      </CCard>
    )
  }
})

export const CompanySettingItem = defineComponent({
  props: {
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },
  emits: {
    finished: (): boolean => true
  },
  setup(props, {emit}) {
    const state = reactive<{
      phoneVisible: boolean
      companyNameVisible: boolean
      isShowUserCode: boolean
    }>({
      phoneVisible: false,
      companyNameVisible: false,
      isShowUserCode: false
    })

    function handleUserCodeClick() {
      if (state.isShowUserCode) {
        state.isShowUserCode = false
      } else {
        state.isShowUserCode = true
      }
    }
    return () => (
      <CCard showTitle={false} title={'账号信息'} class='bg-white p-0'>
        <SettingItem
          class='border-b border-splitLine'
          label='公司名称'
          desc={props.userInfo.userCompany || '暂未设置公司名称'}
          clickText='编辑名称'
          onClick={() => (state.companyNameVisible = true)}
        ></SettingItem>

        <SettingItem
          class='border-b border-splitLine'
          label='绑定手机'
          desc={props.userInfo.userPhone}
          clickText='换绑手机'
          onClick={() => (state.phoneVisible = true)}
        ></SettingItem>

        <SettingItem
          label='用户编码'
          desc={state.isShowUserCode ? props.userInfo.userCode || '用户编码为空' : '*********'}
          clickText={state.isShowUserCode ? '隐藏' : '查看'}
          onClick={handleUserCodeClick}
        ></SettingItem>

        <CFormModal title='换绑新的手机号' class='w-388' v-model={[state.phoneVisible, 'visible']}>
          {{
            default: (changeVisible: ChangeVisible) => (
              <EditUserPhoneModalForm
                changeVisible={changeVisible}
                userInfo={props.userInfo}
                onFinish={() => {
                  emit('finished')
                }}
              ></EditUserPhoneModalForm>
            )
          }}
        </CFormModal>

        <CFormModal
          title='公司名称编辑'
          class='w-388'
          v-model={[state.companyNameVisible, 'visible']}
        >
          {{
            default: (changeVisible: ChangeVisible) => (
              <EditUserCompanyNameModalForm
                changeVisible={changeVisible}
                userInfo={props.userInfo}
                onFinish={() => {
                  emit('finished')
                }}
              ></EditUserCompanyNameModalForm>
            )
          }}
        </CFormModal>
      </CCard>
    )
  }
})

export const CBCSettingItem = defineComponent({
  props: {
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },
  emits: {
    finished: (): boolean => true
  },
  setup() {
    return () => (
      <CCard showTitle={false} title={'关于我们'} class='bg-white p-0'>
        <SettingItem
          class='border-b border-splitLine'
          label='关于我们'
          clickText='查看'
          onClick={() => {
            toAboutUs()
          }}
        ></SettingItem>

        <SettingItem
          label='联系客服'
          clickText='查看'
          onClick={() => {
            toContactUs()
          }}
        ></SettingItem>
      </CCard>
    )
  }
})
